function Banner(){
    
    this.index = 0;
    this.banner_container = document.querySelector("#banner_container");
    this.slides = document.querySelectorAll("#banner_container li");
    this.prev_btn = document.querySelector("#prev_btn");
    this.next_btn = document.querySelector("#next_btn");
    this.container = document.querySelector("#container");
    this.bindEvent();
    this.autoPlay();
}


Banner.prototype.bindEvent = function(){
    var self = this;
    var max_index = self.slides.length - 1;
    self.prev_btn.onclick = function(){
        if( self.index === 0){
            self.banner_container.style.left = -max_index * 1130 + "px";
            self.index = max_index - 1;
        }else{
            self.index --;
        }
        self.changeSlide();
    }
    self.next_btn.onclick = function(){
        if( self.index === max_index){
            self.banner_container.style.left = 0;;
            self.index = 1;
        }else{
            self.index ++;
        }
        self.changeSlide();
    }
}

Banner.prototype.changeSlide = function(){
    $(this.banner_container)
    .stop()
    .animate({  
        left : -this.index * 1130
    },1000)
}

Banner.prototype.autoPlay = function(){
    var self = this;
    var t = setInterval( function(){
        self.next_btn.onclick(); 
    } , 2500)
    this.container.onmouseover = function(){
        clearInterval( t );
    }
    this.container.onmouseout = function(){
        clearInterval(t);
        t = setInterval( function(){
            self.next_btn.onclick(); 
        } , 2500)
    }
}

var bann = new Banner();
var select_container = document.querySelector(".select-container");
var select = document.querySelector(".select")
window.onscroll = function(){
    if(window.scrollY >= 600){
        select.style.position = "fixed";
        select.style.top = 0
    }else{
        select.style.position = "static";
    }
}

var list_con = document.querySelector(".list-con")
window.onload = function(){
    var html = ""
    for(var i = 0;i<8;i++){
        data.forEach(function(value,index){
            html +=`
            <div class="card-box">
                    <div class="card-img">
                        <a href="##"><img src="${value.img}" alt=""></a>
                    </div>
                    <div class="card-tittle">
                        <p class="tittle1"><a href="###">${value.title}</a></p>
                        <p class="tittle2">${value.subtitle}</p>
                        <p class="tittle3">
                            <span class="tittle3-1">${value.liulan}</span>
                            <span class="tittle3-2">${value.xiaoxi}</span>
                            <span class="tittle3-3">${value.zan}</span>
                        </p>
                    </div>
                    <div class="card-bottom">
                        <span>
                            <a href="##" class="text_ellipsis">
                                <img src="${value.img2}" alt="">
                                <i>${value.b_title}</i> 
                            </a>
                        </span>
                        <span class="hours">${value.time}</span>
                    </div>
                </div>
            `
        })
    }
    list_con.innerHTML = html;
    var course_container = document.querySelector(".course-container")
    var html1 = "";
    data1.forEach(function(value){
        html1 += `
        <dl class="course-box">
        <dt><img src="${value.img_url}" alt=""></dt>
        <dd class="text_ellipsis"><a href="##" >${value.tittle}</a></dd>
    </dl>
        `
    })
    course_container.innerHTML = html1
}
var zhiding = document.querySelector(".zhiding")
window.onscroll = function(){
    if(window.scrollY >= 760 ){    
        zhiding.style.display = "block";
        if(window.scrollY >= 3070){
            zhiding.style.bottom = "269px"
        }else{
            zhiding.style.bottom = "50px"
        }
    }else{
        zhiding.style.display = "none";
    }
}
zhiding.onclick = function(){
    window.scrollTo({top:0})
}
